body{
	margin:0;
	padding:0;
}
.example{
	background:#FFF;
	position: relative;
	background-image: url(img/bj_01.jpg);
	background-size: 100%;
}
 

.yue{
	width: 100px;
	height: 100px;
	position: absolute;
	top:50%;left:50%;
	margin: -50px 0px 0px -50px;
	background-image: url(img/yueliang.png);
	background-size: 100%;
	z-index: 99999999;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
}
.yue.top{
	top:55%;
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	transition: top 1.4s,opacity 1s;
	-moz-transition:top 1.4s, -moz-opacity 1s;
	-webkit-transition: top 1.4s, -webkit-opacity 1s;

}
.yue.rotate{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
	-moz-transform:rotateY(360deg);
	-o-transform:rotateY(360deg);
	transition: transform 1s;
	-moz-transition:-moz-transform 1s;
	-webkit-transition: -webkit-transform 1s;

}

.active,.left,.right{
	position: fixed;	
    font-weight: bolder;
    font-family: -webkit-pictograph;
    letter-spacing: 2px;
    font-size: 20px;
	
}
.active{
	/*background-image: url(img/bj_15.jpg);*/
	top: 2%;left:72%;z-index: 9999999;
	color: rgba(255,255,255,0.8);
	font-size: 16px;
}
.left,.right{
	color: #fff;
	width: 100px;
	height: 26px;
	margin: -50px 0px 0px -13px;
	background-size: 100%;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-timing-function:   Linear ;
	-webkit-animation-timing-function:   Linear;
	-moz-animation-timing-function:   Linear;
	z-index: 9999999;
}
.left{
	/*background-image: url(img/bj_15.jpg);*/
	top: 61%;left:-35%;
}
.right{	
	/*background-image: url(img/bj_18.jpg);*/
	top: 61%;left: 110%;
}

.left.lefts{
	left:35%;
	transition: left 1s;
	-moz-transition:left 1s;
	-webkit-transition: left 1s;

}
.right.rights{
	left:70%;
	transition: left 1s;
	-moz-transition: left 1s;
	-webkit-transition: left 1s;

}


.tow {
    transform: rotatex(70deg);
    -webkit-transform: rotatex(70deg);
    -moz-transform: rotatex(70deg);
    position: absolute;
    top:63%;z-index: 1000;
	left: 50%;
	
}


.tow span {
	
	display: block;
	width: 0px;
	height: 0px;
	background-color: transparent;
	color: black;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border:2px #1e1f3e solid;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	position: absolute;
	box-shadow: 2px 2px 2px #3c2e63;
	
}

.tow span.span{
	width:200px;
	height: 200px;
	margin:-100px 0 0 -100px;
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	transition: width 3s,height 3s,margin 3s ,opacity 2s;
	-moz-transition:width 3s,height 3s,margin 3s ,-moz-opacity 2;
	-webkit-transition: width 3s,height 3s,margin 3s ,-webkit-opacity 2s;

}
.tow span.spans{
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	transition: opacity 0.8s;
	-moz-transition: -moz-opacity 0.8s;
	-webkit-transition: -webkit-opacity 0.8s;

}